{% extends 'base.html' %}
{% load static %}


{% block content %}

<div class="container mt-3">
    <div class="row">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="">汇总</a></li>
                    <li class="breadcrumb-item active" aria-current="page">支出汇总</li>
                </ol>
            </nav>
        </div>
    </div>
    <div class="row">
        {% for item in sum_stats_list %}
        <div class="col-md-3">
            <div class="card mb-3">
                <div class="card-header bg-primary text-white">
                    <h2>{{ item.title }}</h2>
                </div>
                <div class="card-body border border-paimary">
                    <h5 class="card-title">支出 <span class="text-danger">{{ item.count }}</span> 笔</h5>
                    <p class="card-text">支出总额: <span class="text-danger font-weight-bold">{{ item.sum }}</span></p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="d-flex justify-content-around flex-wrap">
        <div class="card" style="width: 400px;height:400px;margin-bottom: 10px;">
            <div class="card-body" id="s1"></div>
        </div>
        <div class="card" style="width: 400px;height:400px;margin-bottom: 10px;">
            <div class="card-body" id="s2"></div>
        </div>
        <div class="card" style="width: 400px;height:400px;margin-bottom: 10px;">
            <div class="card-body" id="s3"></div>
        </div>
        <div class="card" style="width: 400px;height:400px;margin-bottom: 10px;">
            <div class="card-body" id="s4"></div>
        </div>
    </div>

</div>

{% endblock %}

{% block js %}

<script src="{% static 'js/echarts.min.js' %}"></script>
<script src="{% static 'js/expense_summary_index.js' %}"></script>
{% endblock %}